<template>
  <button id="fu-wave-btn" class="fu-btn fu-line-1 fu-fix-ios-appearance" :class="[
      'fu-size-' + size,
      plain ? 'fu-btn--' + type + '--plain' : '',
      loading ? 'fu-loading' : '',
      shape == 'circle' ? 'fu-round-circle' : '',
      hairLine ? showHairLineBorder : 'fu-btn--bold-border',
      'fu-btn--' + type,
      disabled ? `fu-btn--${type}--disabled` : '',
    ]" :disabled="disabled" :form-type="formType" :open-type="openType" :app-parameter="appParameter" :hover-stop-propagation="hoverStopPropagation" :send-message-title="sendMessageTitle" send-message-path="sendMessagePath" :lang="lang" :data-name="dataName" :session-from="sessionFrom" :send-message-img="sendMessageImg" :show-message-card="showMessageCard" @getphonenumber="getphonenumber" @getuserinfo="getuserinfo" @error="error" @opensetting="opensetting" @launchapp="launchapp" :style="[customStyle, {
      overflow: ripple ? 'hidden' : 'visible'
    }]" @tap.stop="click($event)" :hover-class="getHoverClass" :loading="loading">
    <slot></slot>
    <view v-if="ripple" class="fu-wave-ripple" :class="[waveActive ? 'fu-wave-active' : '']" :style="{
        top: rippleTop + 'px',
        left: rippleLeft + 'px',
        width: fields.targetWidth + 'px',
        height: fields.targetWidth + 'px',
        'background-color': rippleBgColor || 'rgba(0, 0, 0, 0.15)'
      }"></view>
  </button>
</template>

<script>
let timer, flag;

const throttle = (func, wait = 500, immediate = true) => {
  if (immediate) {
    if (!flag) {
      flag = true;
      // 如果是立即执行，则在wait毫秒内开始时执行
      typeof func === 'function' && func();
      timer = setTimeout(() => {
        flag = false;
      }, wait);
    }
  } else {
    if (!flag) {
      flag = true
      // 如果是非立即执行，则在wait毫秒内的结束处执行
      timer = setTimeout(() => {
        flag = false
        typeof func === 'function' && func();
      }, wait);
    }

  }
};

/**
 * button 按钮
 * @description Button 按钮
 * @property {String} size 按钮的大小
 * @property {Boolean} ripple 是否开启点击水波纹效果
 * @property {String} ripple-bg-color 水波纹的背景色，ripple为true时有效
 * @property {String} type 按钮的样式类型
 * @property {Boolean} plain 按钮是否镂空，背景色透明
 * @property {Boolean} disabled 是否禁用
 * @property {Boolean} hair-line 是否显示按钮的细边框(默认true)
 * @property {Boolean} shape 按钮外观形状，见文档说明
 * @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
 * @property {String} form-type 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
 * @property {String} open-type 开放能力
 * @property {String} data-name 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
 * @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果(App-nvue 平台暂不支持)
 * @property {Number} hover-start-time 按住后多久出现点击态，单位毫秒
 * @property {Number} hover-stay-time 手指松开后点击态保留时间，单位毫秒
 * @property {Object} custom-style 对按钮的自定义样式，对象形式，见文档说明
 * @event {Function} click 按钮点击
 * @event {Function} getphonenumber open-type="getPhoneNumber"时有效
 * @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
 * @event {Function} error 当使用开放能力时，发生错误的回调
 * @event {Function} opensetting 在打开授权设置页并关闭后回调
 * @event {Function} launchapp 打开 APP 成功的回调
 * @example <fu-button>Fast-UI</fu-button>
 */

export default {
  name: 'fu-button',
  props: {
    // 是否细边框
    hairLine: {
      type: Boolean,
      default: true
    },
    // 按钮的预置样式，default，primary，error，warning，success
    type: {
      type: String,
      default: 'default'
    },
    // 按钮尺寸，default，medium，mini
    size: {
      type: String,
      default: 'default'
    },
    // 按钮形状，circle（两边为半圆），square（带圆角）
    shape: {
      type: String,
      default: 'square'
    },
    // 按钮是否镂空
    plain: {
      type: Boolean,
      default: false
    },
    // 是否禁止状态
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否加载中
    loading: {
      type: Boolean,
      default: false
    },
    // 开放能力，具体请看uniapp稳定关于button组件部分说明
    // https://uniapp.dcloud.io/component/button
    openType: {
      type: String,
      default: ''
    },
    // 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
    // 取值为submit（提交表单），reset（重置表单）
    formType: {
      type: String,
      default: ''
    },
    // 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
    // 只微信小程序、QQ小程序有效
    appParameter: {
      type: String,
      default: ''
    },
    // 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
    hoverStopPropagation: {
      type: Boolean,
      default: false
    },
    // 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
    lang: {
      type: String,
      default: 'en'
    },
    // 会话来源，open-type="contact"时有效。只微信小程序有效
    sessionFrom: {
      type: String,
      default: ''
    },
    // 会话内消息卡片标题，open-type="contact"时有效
    // 默认当前标题，只微信小程序有效
    sendMessageTitle: {
      type: String,
      default: ''
    },
    // 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
    // 默认当前分享路径，只微信小程序有效
    sendMessagePath: {
      type: String,
      default: ''
    },
    // 会话内消息卡片图片，open-type="contact"时有效
    // 默认当前页面截图，只微信小程序有效
    sendMessageImg: {
      type: String,
      default: ''
    },
    // 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
    // 用户点击后可以快速发送小程序消息，open-type="contact"时有效
    showMessageCard: {
      type: Boolean,
      default: false
    },
    // 手指按（触摸）按钮时按钮时的背景颜色
    hoverBgColor: {
      type: String,
      default: ''
    },
    // 水波纹的背景颜色
    rippleBgColor: {
      type: String,
      default: ''
    },
    // 是否开启水波纹效果
    ripple: {
      type: Boolean,
      default: false
    },
    // 按下的类名
    hoverClass: {
      type: String,
      default: ''
    },
    // 自定义样式，对象形式
    customStyle: {
      type: Object,
      default () {
        return {};
      }
    },
    // 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
    dataName: {
      type: String,
      default: ''
    },
    // 节流，一定时间内只能触发一次
    throttleTime: {
      type: [String, Number],
      default: 1000
    }
  },

  computed: {
    // 当没有传bgColor变量时，按钮按下去的颜色类名
    getHoverClass() {
      // 如果开启水波纹效果，则不启用hover-class效果
      if (this.loading || this.disabled || this.ripple || this.hoverClass) return '';
      let hoverClass = '';
      hoverClass = this.plain ? 'fu-' + this.type + '-plain-hover' : 'fu-' + this.type + '-hover';
      return hoverClass;
    },

    // 在'primary', 'success', 'error', 'warning'类型下，不显示边框，否则会造成四角有毛刺现象
    showHairLineBorder() {
      if (['primary', 'success', 'error', 'warning'].indexOf(this.type) >= 0 && !this.plain) {
        return '';
      } else {
        return 'fu-hairline-border';
      }
    }
  },

  data() {
    return {
      rippleTop: 0, // 水波纹的起点Y坐标到按钮上边界的距离
      rippleLeft: 0, // 水波纹起点X坐标到按钮左边界的距离
      fields: {}, // 波纹按钮节点信息
      waveActive: false // 激活水波纹
    };
  },

  methods: {
    // 按钮点击
    click(e) {
      // 进行节流控制，每this.throttle毫秒内，只在开始处执行
      throttle(() => {
        // 如果按钮时disabled和loading状态，不触发水波纹效果
        if (this.loading === true || this.disabled === true) return;
        // 是否开启水波纹效果
        if (this.ripple) {
          // 每次点击时，移除上一次的类，再次添加，才能触发动画效果
          this.waveActive = false;
          this.$nextTick(function() {
            this.getWaveQuery(e);
          });
        }
        this.$emit('click', e);
      }, this.throttleTime);
    },

    // 查询按钮的节点信息
    getWaveQuery(e) {
      this.getElQuery().then(res => {
        // 查询返回的是一个数组节点
        let data = res[0];
        // 查询不到节点信息，不操作
        if (!data.width || !data.width) return;
        // 水波纹的最终形态是一个正方形(通过border-radius让其变为一个圆形)，这里要保证正方形的边长等于按钮的最长边
        // 最终的方形（变换后的圆形）才能覆盖整个按钮
        data.targetWidth = data.height > data.width ? data.height : data.width;
        if (!data.targetWidth) return;
        this.fields = data;
        let touchesX = '',
          touchesY = '';
        // #ifdef MP-BAIDU
        touchesX = e.changedTouches[0].clientX;
        touchesY = e.changedTouches[0].clientY;
        // #endif
        // #ifdef MP-ALIPAY
        touchesX = e.detail.clientX;
        touchesY = e.detail.clientY;
        // #endif
        // #ifndef MP-BAIDU || MP-ALIPAY
        touchesX = e.touches[0].clientX;
        touchesY = e.touches[0].clientY;
        // #endif
        // 获取触摸点相对于按钮上边和左边的x和y坐标，原理是通过屏幕的触摸点（touchesY），减去按钮的上边界data.top
        // 但是由于`transform-origin`默认是center，所以这里再减去半径才是水波纹view应该的位置
        // 总的来说，就是把水波纹的矩形（变换后的圆形）的中心点，移动到我们的触摸点位置
        this.rippleTop = touchesY - data.top - data.targetWidth / 2;
        this.rippleLeft = touchesX - data.left - data.targetWidth / 2;
        this.$nextTick(() => {
          this.waveActive = true;
        });
      });
    },

    // 获取节点信息
    getElQuery() {
      return new Promise(resolve => {
        let queryInfo = '';
        queryInfo = uni.createSelectorQuery().in(this);
        //#ifdef MP-ALIPAY
        queryInfo = uni.createSelectorQuery();
        //#endif
        queryInfo.select('.fu-btn').boundingClientRect();
        queryInfo.exec(data => {
          resolve(data);
        });
      });
    },

    // 下面为对接uniapp官方按钮开放能力事件回调的对接
    getphonenumber(res) {
      this.$emit('getphonenumber', res);
    },

    getuserinfo(res) {
      this.$emit('getuserinfo', res);
    },

    error(res) {
      this.$emit('error', res);
    },

    opensetting(res) {
      this.$emit('opensetting', res);
    },

    launchapp(res) {
      this.$emit('launchapp', res);
    }
  }
}

</script>

<style scoped lang="scss">
.#{$fu-prefix} {
  &-btn::after {
    border: none;
  }

  &-btn {
    position: relative;
    border: 0;
    //border-radius: 10rpx;
    display: inline-block;
    // 避免边框某些场景可能被“裁剪”，不能设置为hidden
    overflow: visible;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 40rpx;
    z-index: 1;
    box-sizing: border-box;
    transition: all 0.15s;

    &--bold-border {
      border: 1px solid #ffffff;
    }

    &--default {
      color: $fu-content-color;
      border-color: #c0c4cc;
      background: #ffffff;
    }

    &--primary {
      color: #ffffff;
      border-color: $fu-type-primary;
      background: $fu-type-primary;
    }

    &--success {
      color: #ffffff;
      border-color: $fu-type-success;
      background: $fu-type-success;
    }

    &--error {
      color: #ffffff;
      border-color: $fu-type-error;
      background: $fu-type-error;
    }

    &--warning {
      color: #ffffff;
      border-color: $fu-type-warning;
      background: $fu-type-warning;
    }

    &--default--disabled {
      color: #ffffff;
      border-color: #e4e7ed;
      background: #ffffff;
    }

    &--primary--disabled {
      color: #ffffff !important;
      border-color: $fu-type-primary-disabled !important;
      background: $fu-type-primary-disabled !important;
    }

    &--success--disabled {
      color: #ffffff !important;
      border-color: $fu-type-success-disabled !important;
      background: $fu-type-success-disabled !important;
    }

    &--error--disabled {
      color: #ffffff !important;
      border-color: $fu-type-error-disabled !important;
      background: $fu-type-error-disabled !important;
    }

    &--warning--disabled {
      color: #ffffff !important;
      border-color: $fu-type-warning-disabled !important;
      background: $fu-type-warning-disabled !important;
    }

    &--primary--plain {
      color: $fu-type-primary !important;
      border-color: $fu-type-primary-disabled !important;
      background: $fu-type-primary-light !important;
    }

    &--success--plain {
      color: $fu-type-success !important;
      border-color: $fu-type-success-disabled !important;
      background: $fu-type-success-light !important;
    }

    &--error--plain {
      color: $fu-type-error !important;
      border-color: $fu-type-error-disabled !important;
      background: $fu-type-error-light !important;
    }

    &--warning--plain {
      color: $fu-type-warning !important;
      border-color: $fu-type-warning-disabled !important;
      background: $fu-type-warning-light !important;
    }
  }

  &-hairline-border:after {
    content: ' ';
    position: absolute;
    pointer-events: none;
    // 设置为border-box，意味着下面的scale缩小为0.5，实际上缩小的是伪元素的内容（border-box意味着内容不含border）
    box-sizing: border-box;
    // 中心点作为变形(scale())的原点
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    left: 0;
    top: 0;
    width: 199.8%;
    height: 199.7%;
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    border: 1px solid currentColor;
    z-index: 1;
  }

  &-wave-ripple {
    z-index: 0;
    position: absolute;
    border-radius: 100%;
    background-clip: padding-box;
    pointer-events: none;
    user-select: none;
    transform: scale(0);
    opacity: 1;
    transform-origin: center;
  }

  &-wave-ripple.#{$fu-prefix}-wave-active {
    opacity: 0;
    transform: scale(2);
    transition: opacity 1s linear, transform 0.4s linear;
  }

  &-round-circle {
    border-radius: 100rpx;
  }

  &-round-circle::after {
    border-radius: 100rpx;
  }

  &-loading::after {
    background-color: hsla(0, 0%, 100%, 0.35);
  }

  &-size-default {
    font-size: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
  }

  &-size-medium {
    display: inline-flex;
    width: auto;
    font-size: 26rpx;
    height: 70rpx;
    line-height: 70rpx;
    padding: 0 80rpx;
  }

  &-size-mini {
    display: inline-flex;
    width: auto;
    font-size: 22rpx;
    padding-top: 1px;
    height: 50rpx;
    line-height: 50rpx;
    padding: 0 20rpx;
  }

  &-primary-plain-hover {
    color: #ffffff !important;
    background: $fu-type-primary-dark !important;
  }

  &-default-plain-hover {
    color: $fu-type-primary-dark !important;
    background: $fu-type-primary-light !important;
  }

  &-success-plain-hover {
    color: #ffffff !important;
    background: $fu-type-success-dark !important;
  }

  &-warning-plain-hover {
    color: #ffffff !important;
    background: $fu-type-warning-dark !important;
  }

  &-error-plain-hover {
    color: #ffffff !important;
    background: $fu-type-error-dark !important;
  }

  &-info-plain-hover {
    color: #ffffff !important;
    background: $fu-type-info-dark !important;
  }

  &-default-hover {
    color: $fu-type-primary-dark !important;
    border-color: $fu-type-primary-dark !important;
    background-color: $fu-type-primary-light !important;
  }

  &-primary-hover {
    background: $fu-type-primary-dark !important;
    color: #fff;
  }

  &-success-hover {
    background: $fu-type-success-dark !important;
    color: #fff;
  }

  &-info-hover {
    background: $fu-type-info-dark !important;
    color: #fff;
  }

  &-warning-hover {
    background: $fu-type-warning-dark !important;
    color: #fff;
  }

  &-error-hover {
    background: $fu-type-error-dark !important;
    color: #fff;
  }
}
</style>
